/*
 * @ModuleName: 二次封装el-table
 * @Author: zhuzhaofeng
 * @Date: 2020-05-08 21:56:36
 */
import { mergePagingArguments } from "./utils";
import { Table, TableColumn, Pagination } from "element-ui";
export default {
  name: "CustomTable",
  components: {
    "el-table": Table,
    "el-table-column": TableColumn,
    "el-pagination": Pagination
  },
  props: {
    /**
     * table 数据列表
     * [注意] 如果data 存在 则优先级高于下面 attrs 中的 data
     * example:
     * # component:
     *  <CustomTable :data="tabelData" />
     * # data
     *  data() {
     *    return {
     *       tabelData: [
     *              {
     *                  date: "2016-05-02",
     *                  name: "王小虎",
     *                  address: "上海市普陀区金沙江路 1518 弄"
     *              },
     *              {
     *                  date: "2016-05-04",
     *                  name: "王小虎",
     *                  address: "上海市普陀区金沙江路 1517 弄"
     *              }
     *          ]
     *      },
     *  }
     */
    data: Array,
    /**
     * table Attributes 属性
     * https://element.eleme.cn/#/zh-CN/component/table#table-attributes
     * 支持上述链接中的所有属性
     * [注意] 如果上面data 存在 则优先级高于arrts中的data，会被上面data覆盖
     * example:
     * # component:
     *  <CustomTable :attrs="tableAttrs" />
     * # data
     *  data() {
     *    return {
     *       tableAttrs: {
     *          stripe: true,
     *          border: true,
     *          "show-header": true,
     *          data: [
     *              {
     *                  date: "2020-03-27",
     *                  name: "老村长",
     *                  address: "四川省成都市青羊区人民中路一段16号"
     *              },
     *              {
     *                  date: "2020-03-27",
     *                  name: "老村长",
     *                  address: "四川省成都市青羊区人民中路一段16号"
     *              }
     *          ]
     *      },
     *  }
     */
    attrs: {
      type: Object,
      default: () => {
        return {
          size: "small",
          stripe: true,
          border: true,
          "show-header": true
        };
      }
    },
    /**
     * table events 事件
     * https://element.eleme.cn/#/zh-CN/component/table#table-events
     * 支持上述链接中的所有属性
     * 参数同上述链接中的参数相同
     * example:
     * # component:
     *  <CustomTable :events="tableEvents" />
     * # data
     *  data() {
     *    return {
     *       tableEvents: {
     *           "row-click": (row, column, event) => {
     *               console.log(row);
     *               console.log(column);
     *               console.log(event);
     *           }
     *       }
     *  }
     */
    events: Object,
    /**
     * table 列配置
     * [注意] Scoped Slot 通过 scopedSlots 属性指定
     * https://element.eleme.cn/#/zh-CN/component/table#table-column-attributes
     * 支持上述链接的所有参数
     * example:
     * # component:
     *  <CustomTable :cols="cols" />
     * # data
     *  data() {
     *    return {
     *       cols: [
     *          { prop: "date", label: "日期", width: "180" },
     *          { prop: "name", label: "姓名", width: "180" },
     *          { prop: "address", label: "地址" },
     *          {
     *              label: "操作",
     *              scopedSlots: {
     *                  default: scoped => {
     *                      return (
     *                          <el-button
     *                              onClick={() => this.handlerEditor(scoped.row)}
     *                              type="primary"
     *                              plain
     *                              size="small"
     *                              icon="el-icon-edit"
     *                          >
     *                              Editor
     *                          </el-button>
     *                      );
     *                  }
     *              }
     *          }
     *        ]
     *     },
     *  },
     *  methods: {
     *      handlerEditor(row) {
     *          console.log(row)
     *      }
     * }
     */
    cols: {
      type: Array,
      default: () => []
    },
    /**
     * 分页器参数 不传则不显示
     * https://element.eleme.cn/#/zh-CN/component/pagination#attributes
     * 支持上面链接中的所有参数，带中划线参数转为驼峰命名page-count  => pageCount
     * 除了上面参数之外添加新的参数：[align] 对齐方式 'left', 'center', 'right'
     */
    paging: {
      type: Object,
      default: () => {}
    },
    /**
     * 分页器事件
     * https://element.eleme.cn/#/zh-CN/component/pagination#events
     * 支持上面链接中的所有事件，必须是带中划线事件名转为驼峰命名 current-change
     */
    pagingEvents: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    localPaging() {
      return this.paging
        ? mergePagingArguments(this.paging, "attrs")
        : undefined;
    }
  },
  render() {
    // 直属 data 优先级高于 attrs中的data的原因
    ////
    // 如果存在直属data 和attrs 中的data同时存在 => 删除attrs中的data
    if (this.data && this.attrs.data) {
      delete this.attrs.data;
    }
    return (
      <div class="custom_table">
        {/* table */}
        <el-table
          data={this.data}
          {...{ attrs: this.attrs }}
          {...{ on: this.events }}
          ref={this.attrs.ref}
        >
          {/* table 列 */}
          {this.cols.map((col, index) => {
            const { scopedSlots } = col;
            return (
              <el-table-column
                show-overflow-tooltip
                align={col.align || "center"}
                key={index}
                {...{ attrs: col }}
                scopedSlots={scopedSlots}
              />
            );
          })}
        </el-table>
        {/* 分页器 不传入 paging prop 则不显示 */}
        {this.localPaging ? (
          <el-pagination
            {...{ attrs: this.localPaging }}
            {...{
              on: {
                "size-change": size =>
                  this.$emit("paging", "size-change", size),
                "current-change": page =>
                  this.$emit("paging", "current-change", page)
              }
            }}
          />
        ) : null}
      </div>
    );
  }
};
